import React, { useState, useMemo, useEffect } from 'react';
import { DeleteOutlined } from '@ant-design/icons';
import { useCurrentNode } from '@/hooks/useCurrentNode';
import { useNodesData, useReactFlow } from '@xyflow/react';
import { EditableProTable } from '@ant-design/pro-components';
import useDesignerStore from '@/store/Designer';
import { usePreviousNodes } from '@/hooks/usePreviousNodes';
import { randomUUID } from '@/utils/dataflow';

export const JoinFieldTable = () => {
  const { drawerHeight } = useDesignerStore()

  const currentNode = useCurrentNode()
  const nodeData = useNodesData(currentNode?.id)
  const preNodes = usePreviousNodes(currentNode?.id)
  const leftNode = useNodesData(preNodes?.[0]?.id)
  const rightNode = useNodesData(preNodes?.[1]?.id)
  const { updateNodeData } = useReactFlow()
  const datasource = nodeData?.data?.conditions ?? []

  const [editableKeys, setEditableRowKeys] = useState(() =>
    datasource?.map((item) => item.columnId),
  );

  const setDataSource = (data) => {
    updateNodeData(currentNode?.id, { conditions: data })
  }

  const valueEnum1 = useMemo(() => {
    return leftNode?.data?.columns?.reduce((acc, cur) => {
      acc[cur?.columnName] = {
        ...cur,
        text: cur.columnName
      }
      return acc
    }, {}) ?? {}
  }, [leftNode])
  const valueEnum2 = useMemo(() => {
    return rightNode?.data?.columns?.reduce((acc, cur) => {
      acc[cur?.columnName] = {
        ...cur,
        text: cur.columnName
      }
      return acc
    }, {}) ?? {}
  }, [rightNode])

  const columns = [
    {
      title: ' ',
      editable: false,
      width: 30,
      render: (_, record, idx) => <div style={{ direction: 'rtl' }}>{idx + 1}</div>
    },
    {
      title: leftNode?.data?.label ?? '-',
      dataIndex: 'left',
      width: '40%',
      valueType: 'select',
      valueEnum: valueEnum1,
      fieldProps: {
        showSearch: true
      },
    },
    {
      title: rightNode?.data?.label ?? '-',
      dataIndex: 'right',
      width: '40%',
      valueType: 'select',
      valueEnum: valueEnum2,
      fieldProps: {
        showSearch: true
      }
    },
    {
      title: '操作',
      valueType: 'option',
      width: 50
    },
  ];

  return (
    <EditableProTable
      columns={columns}
      locale={{ emptyText: '请点击下方按钮添加关联键' }}
      scroll={{
        y: drawerHeight - 230
      }}
      rowKey='columnId'
      value={datasource}
      onChange={setDataSource}
      recordCreatorProps={{
        creatorButtonText: '添加关联键',
        type: 'link',
        record: () => ({ columnId: randomUUID() }),
        newRecordType: 'dataSource',
      }}
      tableAlertRender={false}
      editable={{
        type: 'multiple',
        editableKeys,
        actionRender: (row, config, defaultDoms) => {
          return [defaultDoms.delete];
        },
        onValuesChange: (record, recordList) => {
          setDataSource(recordList);
        },
        onChange: setEditableRowKeys,
      }}
    />
  );
};
